<template>

  <el-card>

    <el-row>
      <el-col :span="11" >
        <!--获取不同类型书籍数量-->
        <!--:header-cell-style="{'text-align':'center', 'background':'#FE6219', 'color':'#FFFFFF'}"-->
        <!--:cell-style="{'borderColor':'#F37B7B'}"-->
        <el-table
          :data="BookTypeNumListData"
          height="250"
          :header-cell-style="{'text-align':'center', 'background':'#fef0f0', 'color':'#f56c6c', 'border-color':'#fbc4c4'}"
          :size="size"
          :fit="true"
          border
          style="border: 1px solid #fbc4c4;">
          <el-table-column label="不同书籍类型排行"  >
            <el-table-column
              prop="name"
              label="书籍类型"
              >
            </el-table-column>
            <el-table-column
              prop="num"
              label="数量"
              >
              <template slot-scope="scope">
                <span>{{scope.row.num}} / 本</span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="2">&nbsp;</el-col>

      <el-col :span="11" >
        <!--获取最喜欢的作家排行 列表-->
        <el-table
            :data="favoriteWritersListData"
            height="250"
            :header-cell-style="{'text-align':'center', 'background':'#f0f9eb', 'color':'#67c23a', 'border-color':'#c2e7b0', }"
            :size="size"
            :fit="true"
            border
            style="border: 1px solid #c2e7b0;">
            <el-table-column label="最喜欢的作家排行"  >
              <el-table-column
                prop="name"
                label="作家名称"
              >
              </el-table-column>
              <el-table-column
                prop="num"
                label="已看书籍数量"
              >
                <template slot-scope="scope">
                  <span>{{scope.row.num}} / 本</span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
      </el-col>
    </el-row>



    <el-row style="margin-top: 10px;">
      <!--获取最喜欢的作家排行 饼图-->
      <el-col :span="24">
        <div id="favoriteWritersList" class="echarts-content"></div>
      </el-col>
    </el-row>





    <el-row>

      <!--获取不同类型书籍饼图-->
      <el-col :span="12">
        <div id="BookTypeNumList" class="echarts-content"></div>
      </el-col>

      <el-col :span="12">
        <!--获取评分区间书籍的数量饼图 -->
        <div id="ratingRangeList" class="echarts-content"></div>
      </el-col>
    </el-row>





    <el-row>
      <el-col :span="24">
        <!--获取过去N个月每个月的书籍阅读量-->
        <div id="bookReadingVolumeEchartsList" class="echarts-content"></div>
      </el-col>
    </el-row>



  </el-card>

</template>

<script>

  import http from '@/utils/http';
  // 局部引入
  import * as echarts from 'echarts'

  export default {
    name: "BookAnalyst",
    data(){
      return {
        // 列表的尺寸
        size: 'mini',
        // tag 的大小
        tagSize: 'mini',
        // 获取不同类型书籍数量
        BookTypeNumListData: [],
        // 不同类型书籍echarts
        bookTypeNumEcharts: {
          // 类似数据 ['张三', '李四', '王五']
          legendData: [],
          // 类似  [{name:'张三', value:300}, {name:'李四', value:300},{name:'王五', value:300},],
          seriesData: [],
        },
        // 获取最喜欢的作家排行
        favoriteWritersListData: [],
        // 最喜欢的作家echarts
        favoriteWritersEcharts: {
          // 类似数据 ['张三', '李四', '王五']
          legendData: [],
          // 类似  [{name:'张三', value:300}, {name:'李四', value:300},{name:'王五', value:300},],
          seriesData: [],
        },
        // 不同评分区间
        ratingRangeEcharts: {
          // 类似数据 ['张三', '李四', '王五']
          legendData: [],
          // 类似  [{name:'张三', value:300}, {name:'李四', value:300},{name:'王五', value:300},],
          seriesData: [],
        },
        // 过去N个月每个月的书籍阅读量
        bookReadingVolumeEcharts: {
          // X轴
          xAxisData: [],
          // 数据坐标
          seriesData: [],
        },
      }
    },
    methods: {
      /**
       * 获取过去N个月每个月的书籍阅读量
       */
      getBookReadingVolume(){
        http.get("/book/getBookReadingVolume", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          if (res.data){
            // x轴
            let xAxisData = []
            // 坐标
            let seriesData = []
            for (let objectData of res.data){
              xAxisData.push(objectData.month)
              seriesData.push(objectData.num)
            }
            this.bookReadingVolumeEcharts.xAxisData = xAxisData
            this.bookReadingVolumeEcharts.seriesData = seriesData
          }
          this.initBookReadingVolume()


        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 过去N个月每个月的书籍阅读量 echarts 初始化
       */
      initBookReadingVolume(){
        let myChart = echarts.init(document.getElementById('bookReadingVolumeEchartsList'));
        let option = {
          title: {
            text: '每个月书籍阅读量',
            subtext: '数量/本',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} 本'
          },
          xAxis: {
            type: 'category',
            data: this.bookReadingVolumeEcharts.xAxisData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.bookReadingVolumeEcharts.seriesData,
              type: 'line',
              smooth: true
            }
          ]
        };
        // let option = {
        //   title: {
        //     text: '每个月书籍阅读量',
        //     subtext: '数量/本',
        //     left: 'center'
        //   },
        //   tooltip: {
        //     trigger: 'item',
        //     formatter: '{a} <br/>{b} : {c} 本 ({d}%)'
        //   },
        //   legend: {
        //     type: 'scroll',
        //     orient: 'vertical',
        //     right: 10,
        //     top: 20,
        //     bottom: 20,
        //     data: this.bookReadingVolumeEcharts.legendData
        //   },
        //   series: [
        //     {
        //       name: '评分',
        //       type: 'pie',
        //       radius: '55%',
        //       center: ['40%', '50%'],
        //       data: this.ratingRangeEcharts.seriesData,
        //       emphasis: {
        //         itemStyle: {
        //           shadowBlur: 10,
        //           shadowOffsetX: 0,
        //           shadowColor: 'rgba(0, 0, 0, 0.5)'
        //         }
        //       }
        //     }
        //   ]
        // };
        myChart.setOption(option)
      },
      /**
       * 获取评分区间书籍的数量
       */
      getRatingRange(){
        http.get("/book/getRatingRange", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          if (res.data){
            // 分类
            let title = []
            // 分类数量
            let content = []
            for (let objectData of res.data){
              // '浪费时间', '勉强入口', '普通', '优秀', '经典'
              let name = ""
              if (objectData.grade === 1){
                name = "浪费时间"
              } else if (objectData.grade === 2){
                name = "勉强入口"
              } else if (objectData.grade === 3){
                name = "普通"
              } else if (objectData.grade === 4){
                name = "优秀"
              } else {
                name = "经典"
              }
              title.push(name)
              let obj = {'name': name, 'value': objectData.num}
              content.push(obj)
            }
            this.ratingRangeEcharts.legendData = title
            this.ratingRangeEcharts.seriesData = content
          }
          this.initRatingRange()


        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 评分区间书籍的数量 echarts 初始化
       */
      initRatingRange(){
        let myChart = echarts.init(document.getElementById('ratingRangeList'));
        let option = {
          title: {
            text: '评分区间书籍分布',
            subtext: '数量/本',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} 本 ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: this.ratingRangeEcharts.legendData
          },
          series: [
            {
              name: '评分',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: this.ratingRangeEcharts.seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 获取最喜欢的作家排行
       */
      getFavoriteWriters(){
        http.get("/book/getFavoriteWriters", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.favoriteWritersListData = res.data
          if (res.data){
            // 分类
            let title = []
            // 分类数量
            let content = []
            for (let objectData of res.data){
              title.push(objectData.name)
              let obj = {'name': objectData.name, 'value': objectData.num}
              content.push(obj)
            }
            this.favoriteWritersEcharts.legendData = title
            this.favoriteWritersEcharts.seriesData = content
          }
          this.initFavoriteWriters()


        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化 最喜欢的作家 echarts
       */
      initFavoriteWriters(){
        let myChart = echarts.init(document.getElementById('favoriteWritersList'));
        let option = {
          title: {
            text: '最喜欢的作家已读书籍',
            subtext: '数量/本',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} 本 ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: this.favoriteWritersEcharts.legendData
          },
          series: [
            {
              name: '类型',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: this.favoriteWritersEcharts.seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 获取不同类型书籍数量
       */
      getBookTypeNum(){
        http.get("/book/getBookTypeNum", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.BookTypeNumListData = res.data
          if (res.data){
            // 分类
            let title = []
            // 分类数量
            let content = []
            for (let objectData of res.data){
              title.push(objectData.name)
              let obj = {'name': objectData.name, 'value': objectData.num}
              content.push(obj)
            }
            this.bookTypeNumEcharts.legendData = title
            this.bookTypeNumEcharts.seriesData = content
          }
          this.initBookTypeNum()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化 不同类型书籍数量 echarts
       */
      initBookTypeNum(){
        let myChart = echarts.init(document.getElementById('BookTypeNumList'));
        let option = {
          title: {
            text: '不同类型书籍数量',
            subtext: '数量/本',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} 本 ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: this.bookTypeNumEcharts.legendData
          },
          series: [
            {
              name: '类型',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: this.bookTypeNumEcharts.seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option)
      },
    },
    mounted(){
      this.getFavoriteWriters()
      this.getBookTypeNum()
      this.getRatingRange()
      this.getBookReadingVolume()
    },
  }
</script>

<style scoped>

  .echarts-content{
    /*width: 600px;*/
    height: 550px;
  }

  /*.el-table {*/
  /*  border: 1px solid red;*/
  /*}*/

</style>
